<template>
  <a-badge
    :color="color"
    :count="count"
    :dot="dot"
    :number-style="numberStyle"
    :offset="offset"
    :overflow-count="overflowCount"
    :show-zero="showZero"
    :status="status"
    :text="text"
    :title="title"
  >
    <template v-if="$slots.count" #count>
      <slot name="count" />
    </template>
    <slot />
  </a-badge>
</template>

<script>
import { defineComponent } from 'vue'
import { Badge } from 'ant-design-vue'
export default defineComponent({
  name: 'ZBadge',
  components: {
    ABadge: Badge
  },
  props: {
    color: {
      type: String,
      default: undefined
    },
    count: {
      type: String,
      default: undefined
    },
    dot: {
      type: Boolean,
      default: undefined
    },
    numberStyle: {
      type: Object,
      default: undefined
    },
    offset: {
      type: Array,
      default: undefined
    },
    overflowCount: {
      type: Number,
      default: 99
    },
    showZero: {
      type: Boolean,
      default: false
    },
    status: {
      type: String,
      default: undefined
    },
    text: {
      type: String,
      default: undefined
    },
    title: {
      type: String,
      default: 'count'
    }
  }
})
</script>
